<template>
  <div class="map-container" :style="{ height: height }">
    <div id="map-container" ref="mapContainer" class="amap-container"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'

// 定义酒店类型接口
interface Hotel {
  hotelName: string;
  country?: string;
  city?: string;
  rating?: number;
  longitude: string | number;
  latitude: string | number;
  [key: string]: any;
}

const props = defineProps({
  // 地图高度
  height: {
    type: String,
    default: '400px'
  },
  // 地图中心点
  center: {
    type: Array,
    default: () => [116.397428, 39.90923] // 默认北京
  },
  // 地图缩放级别
  zoom: {
    type: Number,
    default: 11
  },
  // 要显示的酒店列表
  hotels: {
    type: Array as unknown as () => Hotel[],
    default: () => []
  },
  // 单个酒店信息（用于详情页）
  singleHotel: {
    type: Object as unknown as () => Hotel | null,
    default: null
  }
})

// 地图实例
const AMap = ref(null)
const map = ref(null)
const mapContainer = ref(null)
const markers = ref([])
const mapLoaded = ref(false)

// 初始化地图
const initMap = async () => {
  try {
    // 加载高德地图
    AMap.value = await AMapLoader.load({
      key: '966d68fba925c6ef4aa1f31a45c86263', // 高德地图 key
      version: '2.0',
      plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.GeometryUtil']
    })

    // 创建地图实例
    map.value = new AMap.value.Map(mapContainer.value, {
      zoom: props.zoom,
      center: props.center,
      resizeEnable: true
    })

    // 添加控件
    map.value.addControl(new AMap.value.ToolBar())
    map.value.addControl(new AMap.value.Scale())
    
    // 标记地图已加载
    mapLoaded.value = true
    
    // 等待DOM更新后重新计算地图大小
    nextTick(() => {
      if (map.value) {
        map.value.resize()
      }
      
      // 根据传入的数据添加标记
      addMarkers()
    })
  } catch (error) {
    console.error('高德地图加载失败:', error)
  }
}

// 添加标记
const addMarkers = () => {
  if (!map.value || !AMap.value) return
  
  // 清除已有标记
  clearMarkers()
  
  // 如果是单个酒店（详情页），添加单个标记
  if (props.singleHotel && props.singleHotel.longitude && props.singleHotel.latitude) {
    addSingleMarker(props.singleHotel)
    return
  }
  
  // 如果是酒店列表（首页），添加多个标记
  if (props.hotels && props.hotels.length > 0) {
    const validHotels = props.hotels.filter(hotel => hotel.longitude && hotel.latitude)
    
    if (validHotels.length > 0) {
      console.log('添加酒店标记点:', validHotels.length)
      
      // 添加多个标记
      validHotels.forEach(hotel => {
        addHotelMarker(hotel)
      })
      
      // 自动调整地图视野以包含所有标记点
      if (markers.value.length > 0) {
        nextTick(() => {
          map.value.setFitView(markers.value)
        })
      }
    } else {
      console.log('没有有效的酒店数据')
    }
  }
}

// 添加单个酒店标记（详情页使用）
const addSingleMarker = (hotel) => {
  try {
    const position = [parseFloat(hotel.longitude), parseFloat(hotel.latitude)]
    
    // 创建标记
    const marker = new AMap.value.Marker({
      position,
      title: hotel.hotelName,
      animation: 'AMAP_ANIMATION_DROP',
      clickable: true
    })
    
    // 创建信息窗体
    const infoWindow = new AMap.value.InfoWindow({
      content: `
        <div class="info-window">
          <h4>${hotel.hotelName}</h4>
          <p>${hotel.country || ''} ${hotel.city || ''}</p>
          <p>评分: ${hotel.rating || '暂无评分'}</p>
        </div>
      `,
      offset: new AMap.value.Pixel(0, -30)
    })
    
    // 点击标记时显示信息窗体
    marker.on('click', () => {
      infoWindow.open(map.value, marker.getPosition())
    })
    
    // 将标记添加到地图
    marker.setMap(map.value)
    markers.value.push(marker)
    
    // 自动打开信息窗体
    infoWindow.open(map.value, position)
    
    // 设置地图中心点
    map.value.setCenter(position)
  } catch (error) {
    console.error('添加单个酒店标记失败:', error)
  }
}

// 添加酒店标记（首页使用）
const addHotelMarker = (hotel) => {
  try {
    const position = [parseFloat(hotel.longitude), parseFloat(hotel.latitude)]
    
    // 创建标记
    const marker = new AMap.value.Marker({
      position,
      title: hotel.hotelName,
      clickable: true
    })
    
    // 创建信息窗体
    const infoWindow = new AMap.value.InfoWindow({
      content: `
        <div class="info-window">
          <h4>${hotel.hotelName}</h4>
          <p>${hotel.country || ''} ${hotel.city || ''}</p>
          <p>评分: ${hotel.rating || '暂无评分'}</p>
        </div>
      `,
      offset: new AMap.value.Pixel(0, -30)
    })
    
    // 点击标记时显示信息窗体
    marker.on('click', () => {
      infoWindow.open(map.value, marker.getPosition())
    })
    
    // 将标记添加到地图
    marker.setMap(map.value)
    markers.value.push(marker)
  } catch (error) {
    console.error('添加酒店标记失败:', error, hotel)
  }
}

// 清除所有标记
const clearMarkers = () => {
  if (markers.value.length > 0) {
    markers.value.forEach(marker => {
      marker.setMap(null)
    })
    markers.value = []
  }
}

// 重新调整地图大小
const resizeMap = () => {
  if (map.value) {
    nextTick(() => {
      map.value.resize()
    })
  }
}

// 监听 props 变化，更新标记
watch(() => props.hotels, (newVal) => {
  if (map.value && mapLoaded.value) {
    console.log('酒店数据变化，更新标记点:', newVal?.length || 0)
    addMarkers()
  }
}, { deep: true })

watch(() => props.singleHotel, () => {
  if (map.value && mapLoaded.value && props.singleHotel) {
    addMarkers()
  }
}, { deep: true })

// 监听高度变化，调整地图大小
watch(() => props.height, () => {
  resizeMap()
})

// 组件挂载时初始化地图
onMounted(() => {
  initMap()
  
  // 监听窗口大小变化，调整地图大小
  window.addEventListener('resize', resizeMap)
})

// 组件卸载时销毁地图
onUnmounted(() => {
  if (map.value) {
    map.value.destroy()
  }
  
  window.removeEventListener('resize', resizeMap)
})
</script>

<style scoped>
.map-container {
  width: 100%;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.amap-container {
  width: 100%;
  height: 100%;
}

:deep(.info-window) {
  padding: 8px 12px;
}

:deep(.info-window h4) {
  margin: 0 0 5px 0;
  font-size: 16px;
}

:deep(.info-window p) {
  margin: 5px 0;
  font-size: 14px;
}
</style> 